<template>
  <div>
    <div class="search">
      <a-form :model="formModel">
        <a-row :gutter="20">
          <a-col :span="6" :lg="6" :xs="9" :md="8">
            <a-form-item label="日期">
              <a-range-picker
                v-model:value="data.time"
                style="width: 100%"
                :ranges="data.ranges"
                show-time
                format="YYYY/MM/DD HH:mm:ss"
                @change="panelChange"
              />
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="订单号">
              <a-input placeholder="请输入订单号" v-model:value="formModel.number"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="护士ID">
              <a-input placeholder="请输入护士ID" v-model:value="formModel.nurseId"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="手机号">
              <a-input placeholder="请输入手机号筛选" v-model:value="formModel.mobile"></a-input>
            </a-form-item>
          </a-col>

          <a-col :span="6">
            <a-form-item label="渠道">
              <a-select ref="select" v-model:value="formModel.organName" placeholder="请选择渠道">
                <a-select-option v-for="item in data.organList" :value="item.source" :key="item.source">{{ item.source }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 头部 -->
    <div class="global-button">
      <a-button type="primary" @click="search(1)" class="d-a-center">搜索</a-button>
      <a-button type="primary" @click="excleData()" class="d-a-center">导出</a-button>
    </div>
    <card :list="data.chartTabs" :data="info" />
    <!-- 列表 -->
    <a-table
      rowKey="id"
      :row-selection="rowSelection"
      :columns="columns"
      :data-source="renderData"
      bordered
      :loading="loading"
      :pagination="pagination"
      @change="handleTableChange"
    >
      <!-- :scroll="{ y: 540,x:'auto' }" -->
      <template #withdrawalsStatus="{ record }">
        <a-tag v-if="record.withdrawalsStatus" :color="statusColorObj[record.withdrawalsStatus].color">{{
          statusColorObj[record.withdrawalsStatus].text
        }}</a-tag>
      </template>

      <template #status="{ record }">
        <div>{{ orderStatus[record.status] }}</div>
      </template>
    </a-table>
  </div>
</template>
<script setup>
import { reactive, ref, watch, computed, createVNode, toRefs, defineOptions } from 'vue'
import { Modal, notification, message } from 'ant-design-vue'
import { columnsArr, dataObj, statusColorObj, orderStatus } from './data'
import router from '@/router/index.js'
import {
  selectOrganOrderByDto,
  selectPlaceOrganList,
  deleteOrganById,
  uploadOrganOrderList,
  selectOrganIdList
} from '@/api/content/translate'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
import { useTable, useModal, useSelects } from '@/hooks'
import card from '@/components/common/card'
defineOptions({
  name: 'ContentTranslateOrder'
})
// 状态列表

const columns = columnsArr

const data = reactive(dataObj)
// 选择时间
const panelChange = (date, dateString) => {
  formModel.value.startTime = dateString[0]
  formModel.value.endTime = dateString[1]
}

//必须有括号 建议箭头函数 防止深拷贝
const getParams = () => ({})

const { info, renderData, formModel, loading, pagination, handleSearch, handleTableChange } = useTable({
  api: selectOrganOrderByDto,
  getParams
})

const init = () => {
  selectPlaceOrganList({ pageNum: 1, pageSize: 99999 }).then(res => {
    data.organList = res.object.list
  })
}
init()

const { renderData: selectsRenderData, rowSelection } = useSelects({
  key: 'id'
})
const getIds = obj => {
  selectOrganIdList(obj).then(res => {
    selectsRenderData.value = res.object
  })
}
const search = num => {
  handleSearch(num)
  getIds(formModel)
}
search(1)

// 监听renderData的变化
// watch(
//   renderData,
//   (newVal, oldVal) => {
//     console.log('renderData changed:', newVal)
//     // 这里调用你的函数
//     // yourFunction();
//     let arr = newVal.map(item => {
//       return item.id
//     })
//     rowSelection.changePageId(arr)
//   },
//   {
//     deep: true // 如果需要深度监听数组内部对象的变化，请设置deep为true
//   }
// )

//  删除
const del = id => {
  const { closeModal } = useModal.confirm({
    title: '确定删除当前渠道吗?',
    icon: createVNode(ExclamationCircleOutlined),
    okText: '确定',
    okType: 'danger',
    cancelText: '取消',
    onOk: async () => {
      let res = await deleteOrganById({ id })
      // handleSearch()
      closeModal()
    }
  })
}
// 查看
const add = e => {
  data.selectData = e
  data.visible = true
}

const closeModal = () => {
  // data.id = ""
  // data.visible = false
  handleSearch()
}
const handleJump = (id, listPage) => {
  router.push({
    path: '/content/translate/options',
    query: {
      id: id
    }
  })
}

const excleData = () => {
  if (rowSelection.selectedRowKeys.length == 0) {
    message.warning('请选择你要导出的订单')
    return
  }
  const { closeModal } = useModal.confirm({
    title: `确认导出当前${rowSelection.selectedRowKeys.length}条数据吗?`,
    icon: createVNode(ExclamationCircleOutlined),
    onOk() {
      //根据搜索条件导出
      let obj = {
        ...formModel,
        ids: rowSelection.selectedRowKeys
      }
      uploadOrganOrderList({ ...obj }).then(res => {
        let link = document.createElement('a')
        //创建一个a标签
        link.style.display = 'none'
        //将a标签隐藏
        link.href = res.object
        console.log(res.object)
        //给a标签添加下载链接  "域名+接口"  safe是一个动态的域名  后面的接口替换成你自己的下载接口
        link.setAttribute('download', '订单')
        // 此处注意，要给a标签添加一个download属性，属性值就是文件名称 否则下载出来的文件是没有属性的，空白白
        document.body.appendChild(link)
        //将上面创建的a标签加入到body的尾部
        link.click()
        closeModal()
      })
    }
  })
}
</script>

<style scoped lang="less">
.search {
  // background-color: #e6e6e6;
  padding-left: 20px;
  margin-bottom: 20px;
}
</style>
